<template>
  <div class="shop-cart-page hiddenScroll">
    <LayoutContainer>
      <div class="cart">
        <ShopCartItem
          v-if="cart.length > 0"
          v-for="(item, index) in cart"
          :obj="item"
          :checked="allChecked"
          :index="index"
          @change="changeTotal"
          @delete="getCart"
        ></ShopCartItem>
        <el-empty v-else description="no more good" />
        <div class="total">
          <el-checkbox label="全选" v-model="allChecked" style="margin-left: 3%" />
          <div class="consume">
            <span style="color: black">合计：</span>
            <div class="price">￥{{ decimalPointSave(totalParent.price) }}</div>
            <div class="integral" style="margin-left: 10px">
              ∫{{ decimalPointSave(totalParent.integral) }}
            </div>
          </div>
          <el-button type="primary" @click="buy">提交订单</el-button>
        </div>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import ShopCartItem from './components/ShopCartItem.vue'
import { getGoodsFromCart } from '@/api/shop'
import { startLoading, stopLoading } from '@/utils/loading'
import { ref, watch } from 'vue'
import { decimalPointSave } from '@/utils/strutils'
import { useRouter } from 'vue-router'

const router = useRouter()

// 购物车
const cart = ref([])

// 全选按钮
const allChecked = ref(true)

// 获取购物车
const getCart = async () => {
  startLoading()
  const { data } = (await getGoodsFromCart()).data
  stopLoading()
  cart.value = data
}

getCart()

// 子组件总价数组
const total = ref([])

// 修改子组件总价
const changeTotal = (value) => {
  const index = value.index
  const checked = value.checked
  total.value[index] = {
    checked,
    id: value.id,
    price: value.price,
    integral: value.integral,
    number: value.number,
  }
  if (!checked) {
    allChecked.value = false
  }
  if (total.value.every((item) => item.checked)) {
    allChecked.value = true
  }
}

// 总价
const totalParent = ref({
  price: 0,
  integral: 0,
})

// 计算总价
const totalReduce = () => {
  totalParent.value = {
    price: total.value.reduce((pre, cur) => pre + cur.price, 0),
    integral: total.value.reduce((pre, cur) => pre + cur.integral, 0),
  }
}

totalReduce()

// 重新计算总价
watch(
  () => total,
  () => {
    totalReduce()
  },
  { deep: true },
)

// 提交订单
const buy = () => {
  sessionStorage.setItem('chase', JSON.stringify(total.value))
  router.push('/pay')
}
</script>

<style scoped scss="less">
.shop-cart-page {
  .cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    position: relative;

    width: 90%;
    height: 600px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
    margin: 70px auto;
    padding: 10px 0 10px 0;
    border-radius: 6px;
    overflow: hidden;

    .total {
      display: flex;
      align-items: center;
      justify-content: start;

      position: absolute;
      bottom: 0;

      width: 100%;
      height: 60px;
      background-color: white;

      .consume {
        display: flex;
        justify-content: center;

        margin-left: 50%;
        width: 400px;
        font-size: 16px;
        color: rgb(255, 147, 41);
      }
    }
  }
}
</style>
